#@layout()
#define css()
<style>
</style>
#end

#define script()

<script>

    $('.del-action').on('click', function () {
        if (confirm('确定要删除该视频吗？删除后不可恢复')) {
            var id = $(this).attr("data-id");
            ajaxGet("#(CPATH)/admin/attachment/video/doDel/" + id);
        }
    });
$(function(){
    // 单选按钮
    $(".attachment_container").on("click",'.choose-video', function () {
        var currentActive = $(this).hasClass("checked");
        if(currentActive){
            $(this).removeClass("checked");
            $(this).find(".item-checkbox").attr('checked', 'true')
        }else{
            $(this).addClass("checked");
            $(this).find(".item-checkbox").attr('checked', 'false')
        }
    })

    // 批量选择
    $("#checkallBtn").click(function() {
        $("#deleteGroup").show(); // 展示批量删除模式
        $("#normalMode").hide();// 隐藏正常模式下的按钮
        $(".video-card").addClass("choose-video"); // 添加选中class

    })
    // 取消选择
    $("#cancelChoose").click(function() {
        $("#deleteGroup").hide(); // 隐藏批量删除模式
        $("#normalMode").show();// 展示正常模式下的按钮
        $(".video-card").removeClass("choose-video"); // 移除选中class
        $(".video-card").each(function(i, element){
            $(this).removeClass("checked");
        })
        $("input[name='checkbox']").each(function () {
            this.checked = false;
        });
        // 取消选中的全选按钮
        $(".checkallbox input").prop("checked",false);

    })
    // 全选按钮
    $("#checkall").click(function() {
        if (this.checked) {//如果自己被选中
            $("#deleteGroup").show(); // 展示批量删除模式
            $("#normalMode").hide();// 隐藏正常模式下的按钮
            $(".video-card").addClass("choose-video"); // 添加选中class

            $("input[name=checkbox]").prop("checked", "true");
            $(".video-card").each(function(i, element){
                $(this).addClass("checked")
            })
        } else {
            $("#normalMode").show();// 隐藏正常模式下的按钮
            $("#deleteGroup").hide(); // 展示批量删除模式
            $(".video-card").removeClass("choose-video"); // 添加选中class

            $("input[name='checkbox']").each(function () {
                this.checked = false;
            });
            $(".video-card").each(function(i, element){
                $(this).removeClass("checked");
            })
        }
    })

    // 永久删除
    $("#deleteItem").click(function(){
        attachment_deleteByIds();
    })

    //点击批量删除按钮
    function attachment_deleteByIds() {
        //获取已经勾选的复选框
        let checkedId=new Array();			//定义一个数组来保存已选中的value值

        $('div[name="tableItem"]').each(function(){
            var isChecked = $(this).hasClass("checked");
            if(isChecked){
                var dataId = $(this).find('input').attr('value');
                checkedId.push(dataId);
            }
        });

        if(checkedId.length == 0){
            alert("请选择要删除的信息！");
            return false;
        }

        console.log("删除的id数组为："+checkedId);

        if (confirm('确定要删除这些视频吗？删除后不可恢复！')) {
            //进行批量删除操作
            $.ajax({
                type:"POST",
                url:jpress.cpath+"/admin/attachment/video/doDelByIds",
                data:{"ids":checkedId.toString()},
                success:function (data) {
                    console.log("批量删除成功！");
                    location.reload();      //重新刷新页面
                },
                error:function () {
                    console.log("批量删除失败！");
                }
            });
        }


    }
})
</script>

#end

#define content()
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">

                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h1>
                                视频管理
                                <small data-toggle="tooltip" title="可以查看所有文章，鼠标移到文章标题上，可以对其编辑或删除等操作" data-placement="bottom"
                                       data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                                <small> 首页 / 视频 / 视频管理</small>
                            </h1>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 ">
                    <div class=" float-sm-right" style="padding-top: 15px">
                        <a href="#(CPATH)/admin/attachment/video/category" type="button" class="btn btn-outline-secondary"><i class="fa fa-cog"></i> 分类管理</a>
                        <a href="./add" type="button" class="btn btn-primary"><i class="fas fa-plus"></i> 上传视频</a>
                    </div>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>



    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <form class=" admin-search-panel" action="" method="get">
                        <div class="row"  id="normalMode">
                            <div class="form-group col-lg-2">
                                <input type="text" class="form-control" placeholder="请输入标题" name="title" value="#para('title')">
                            </div>

                            <div class="form-group col-lg-2">
                                <select class="form-control" name="type">
                                    <option value="">类型</option>

                                    <option value="vod" #selectedIf(para('type') == 'vod') > 视频</option>
                                    <option value="live" #selectedIf(para('type') == 'live') > 直播</option>
                                    <option value="code" #selectedIf(para('type') == 'code') > 代码</option>

                                </select>
                            </div>

                            <div class="form-group col-lg-2">
                                <select class="form-control" name="categoryId">
                                    <option value="">全部分类</option>
                                    #for(category : categories)
                                    <option value="#(category.id ??)" #selectedIf(category.id == numberPara('categoryId'))>#(category.title ??)</option>
                                    #end
                                </select>
                            </div>

                            <div class="form-group col-lg-6">
                                <button type="submit" class="btn btn-primary ">查询</button>
                                <button type="reset" class="btn btn-default">重置</button>
                                <button type="reset"  class="btn btn-default" id="checkallBtn">批量选择</button>
                            </div>

                        </div>
                        <!--批量删除模式-->
                        <div class="row" id="deleteGroup">
                            <button type="button" class="btn btn-warning mr-3 ml-2" id="deleteItem">永久删除</button>
                            <button type="button" class="btn btn-default" id="cancelChoose">取 消</button>
                        </div>
                        <!-- /.card-body -->
                    </form>
                </div> <!-- /.card-body -->
                <div class="card-body p-0">



                    <!---->
                    <div class="p-3">
                        <div class="row attachment_container">
                            #for(item : page.list ??)
                            <div class="col-md-3">
                                <div class="video-card"  name="tableItem">
                                    <div class="video-img">
                                        <img src="#(CPATH)#(item.cover ??)" alt="" class="video-poster">
                                        <span class="video-tag">#(item.category.title ?? "未分类")</span>
                                    </div>
                                    <div class="video-content">
                                        <h6 class="video-title mb-0 ellipsis1"><a href="#(CPATH)/admin/attachment/video/edit/#(item.id)" class="text-dark"> #(item.vodName ??) </a></h6>
                                        <!--<div class="video-desc">-->
                                            <!--<span><i class="bi bi-clock"></i> #date(item.created ??)</span>-->
                                            <!--<div>-->
                                                <!--<a href="#(CPATH)/admin/attachment/video/edit/#(item.id)">编辑</a> |-->
                                                <!--<a href="javascript:;" class="del-action red-action" data-id="#(item.id)">删除</a>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                        <!--操作按钮-->
                                        <div class="video-desc">
                                            <span><i class="bi bi-clock"></i> #date(item.created ??)</span>
                                            <div class="dropup show">
                                                <a href="javascript:void(0);" class="video-operation" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots"></i></a>
                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                                                    <a class="dropdown-item" href="#(CPATH)/admin/attachment/video/edit/#(item.id)"><i class="bi bi-pencil-square"></i> 编辑</a>
                                                    <a class="del-action red-action dropdown-item" href="javascript:void(0);" data-id="#(item.id)"><i class="bi bi-trash"></i> 删除</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="checkbox"><i class="bi bi-check2"></i></span>
                                    <input type="checkbox" class="item-checkbox" name="checkbox" value="#(item.id ??)">
                                </div>
                            </div>
                            #end
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-6">
                            </div>

                            <div class="col-sm-6">
                                #@_paginate()
                            </div>
                        </div>
                    </div>
                    <!-- /.card-footer -->


                </div><!-- /.card-body -->


            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

#end